<template>
    <div class="street-box">
        <div class="show-box">
            <span class="left"></span>
            <span class="englishText">Street shot</span>
            <span class="text">街拍</span>
            <span class="right"></span>
        </div>
        <div class="street-content" :style="{height: 415*count+'px'}">
            <div v-for="(item,index) in streetImg" :key="index+'0'" class="cstreet">
                <div :class="item.className">
                    <img :src="item.img" alt="">
                    <div class="img-hover-street">
                        <p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
                        <div class="icon-div">
                            <div>
                                <i class="el-icon-chat-dot-round"></i>
                                <span>{{ item.commentCount }}</span>
                            </div>
                            <div>
                                <i class="el-icon-thumb"></i>
                                <span>{{ item.thumbsCount }}</span>
                            </div>
                            <div>
                                <i class="el-icon-star-on"></i>
                                <span>{{ item.collectionCount }}</span>
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
        </div>
        <div class="more" @click="changeMore" ref="more">MORE</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                streetImg: [{
                    className: "sone",
                    img: require("../../assets/s1.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "stwo",
                    img: require("../../assets/s2.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sthree",
                    img: require("../../assets/s3.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sfour",
                    img: require("../../assets/s4.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sfive",
                    img: require("../../assets/s5.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "ssix",
                    img: require("../../assets/s6.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sseven",
                    img: require("../../assets/s7.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "seight",
                    img: require("../../assets/s8.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sone",
                    img: require("../../assets/s1.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "stwo",
                    img: require("../../assets/s2.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sthree",
                    img: require("../../assets/s3.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sfour",
                    img: require("../../assets/s4.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sfive",
                    img: require("../../assets/s5.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "ssix",
                    img: require("../../assets/s6.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sseven",
                    img: require("../../assets/s7.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "seight",
                    img: require("../../assets/s8.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sone",
                    img: require("../../assets/s1.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "stwo",
                    img: require("../../assets/s2.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sthree",
                    img: require("../../assets/s3.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sfour",
                    img: require("../../assets/s4.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sfive",
                    img: require("../../assets/s5.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "ssix",
                    img: require("../../assets/s6.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "sseven",
                    img: require("../../assets/s7.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                },{
                    className: "seight",
                    img: require("../../assets/s8.jpg"),
                    commentCount: 0,
                    thumbsCount: 0,
                    collectionCount: 0
                }],
                count: 2
            }
        },
        methods: {
            changeMore() {
                if(this.count < this.streetImg.length/4) {
                    this.count ++;
                }
                if(this.count == this.streetImg.length/4) {
                    this.$refs.more.style.display = 'none'
                }
            }
        }
    }
</script>
<style scoped>
    .more {
        width: 140px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #000;
        margin: 40px auto;
        cursor: pointer;
    }
    .more:hover {
        background: #000;
        color: #fff;
    }
    .street-content {
        overflow: hidden;
        width: 1000px;
        margin: 0 auto;
        margin-top: 60px;
    }
    .cstreet {
        width: 25%;
        float: left;
        overflow: hidden;
    }
    .cstreet div {
        width: 100%;
        float: left;
        cursor: pointer;
    }
    .cstreet>div {
        position: relative;
    }
    .cstreet div img {
        width: 100%;
        height: 415px;
    }
    .img-hover-street {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        /* opacity: 0;
        transition: opacity .6s; */
        display: none;
    }
    .cstreet>div:hover .img-hover-street {
        /* opacity: 1; */
        display: block;
    }
    .img-hover-street p {
        margin-top: 40%;
        color: rgb(247, 228, 228);
        font-size: 18px;
        width: 100%;
        padding: 0px 30px;
        box-sizing: border-box;
    }
    .icon-div {
        width: 100%;
        padding: 0 10%;
        box-sizing: border-box;
        margin-top: 10%;
    }
    .icon-div div {
        width: 33%;
        float: left;
        color: #999;
        font-size: 18px;
    }
    .icon-div span {
        margin-left: 4px;
    }

    .show-box {
        width: 1100px;
        margin: 0 auto;
        overflow: hidden;
    }
    .show-box {
        margin-top: 50px;
        position: relative;
        padding-top: 30px;
    }
    .left, .right {
        display: inline-block;
        width: 40%;
        height: 20px;
        position: relative;
    }
    .left:before,.right:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
        width: 100%;
        height: 1px;
        background: #000;
    }
    .text {
        margin: 0px 10px;
        font-size: 30px;
    }
</style>